import * as React from "react";
import {
	Accordion,
	AccordionItem,
	AccordionButton,
	AccordionPanel,
} from "@reach/accordion";
import "@reach/accordion/styles.css";

let name = "Allow multiple panels + collapse";

/*
 * In this example, you should be able to toggle any accordion panel on or off
 * at any time without closing other accordion panels.
 */

function Example() {
	return (
		<Accordion multiple collapsible>
			<AccordionItem>
				<h3>
					<AccordionButton>Here's some important context</AccordionButton>
				</h3>
				<AccordionPanel>
					Ante rhoncus facilisis iaculis nostra faucibus vehicula ac consectetur
					pretium, lacus nunc consequat id viverra facilisi ligula eleifend,
					congue gravida malesuada proin scelerisque luctus est convallis.
				</AccordionPanel>
			</AccordionItem>
			<AccordionItem>
				<h3>
					<AccordionButton>You don't want to miss this</AccordionButton>
				</h3>
				<AccordionPanel>
					Ante rhoncus facilisis iaculis nostra faucibus vehicula ac consectetur
					pretium, lacus nunc consequat id viverra facilisi ligula eleifend,
					congue gravida malesuada proin scelerisque luctus est convallis.
				</AccordionPanel>
			</AccordionItem>
			<AccordionItem>
				<h3>
					<AccordionButton>Really cool teaser here!</AccordionButton>
				</h3>
				<AccordionPanel>
					Ante rhoncus facilisis iaculis nostra faucibus vehicula ac consectetur
					pretium, lacus nunc consequat id viverra facilisi ligula eleifend,
					congue gravida malesuada proin scelerisque luctus est convallis.
				</AccordionPanel>
			</AccordionItem>
			<AccordionItem>
				<h3>
					<AccordionButton>Don't forget me!</AccordionButton>
				</h3>
				<AccordionPanel>
					Ante rhoncus facilisis iaculis nostra faucibus vehicula ac consectetur
					pretium, lacus nunc consequat id viverra facilisi ligula eleifend,
					congue gravida malesuada proin scelerisque luctus est convallis.
				</AccordionPanel>
			</AccordionItem>
		</Accordion>
	);
}

Example.storyName = name;
export { Example };
